<html>
<head>
<style>
table {
  border-collapse: collapse;
  border-spacing: none;
  }

thead th {
  background-color: #F7BE81;
  font-size: 12px;
  font-family: sans-serif;
  border:none;
  }

tbody td {
  font-size: 12px;
}


tr td:first-child,
tr th:first-child {
      border-top-left-radius: 6px;
	  border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
</style>
<!-- 
 <script>
 $(function () {
                $('#datepicker1').datepicker();
				$('#datepicker2').datepicker();				
            });
			</script> -->

<!--<div> <div ng-app="myApp" ng-controller="ListtranCtrl">-->
 <h3>Expense MIS</h3>
 </head>
<body>
    <tt> From Date:  <input type="date" id="datepicker1" name="fromdate" ng-model="fromdt" ng-change="dfilter(fromdt,todt,expensemastmis)"></tt> 
   <tt> To Date:     <input type="date" id="datepicker2" name="todate" ng-model="todt" ng-change="dfilter(fromdt,todt,expensemastmis)"></tt>  
	<!--<input type="button" class="btn btn-success" value="Filter" ng-click="dfilter(fromdt,todt,traninvalidmast)"/>-->

    <input type="text" ng-model="name" class="search-query" placeholder="Search"> 
	
    </br>   </br>
   	   
  <table class="table table-striped table-condensed table-hover">
      <thead>
      <tr>
	   <!--<th>Ref #</th> -->
      <th><a href="" ng-click="predicate = 'expdate'; reverse=!reverse">Date</a></th>
      <th><a href="" ng-click="predicate = 'empname'; reverse=!reverse">Employee Name</a></th>
      <th>Expense Type</th> 
      <th>Amount</th>
	  <th>Comment</th>
	 
	   <!--<th><a href="" ng-click="predicate = 'enteredby'; reverse=!reverse">Entered By</a></th> -->
    </tr>
  </thead>

<tbody>
	<tr ng-repeat="tran in expensemastmis | filter: name | orderBy:predicate:reverse | startFrom:currentPage*pageSize | limitTo:pageSize">
	<!--<td>{{tran.exptranid}}</td>    --> 
	 <td>{{tran.expdate |  date:'dd/MM/yyyy'}}</td>
      <td>{{tran.empname}}</td>
      <td>{{tran.expensecat}}</td> 
	  <td>{{tran.amtpaid | number:0}}</td>
	  <td>{{tran.comment}}</td>
	  
	 </tr>
	<tr>
		<td><h4>Total</h4></td>
		<!--<td></td> -->
		<td></td>
		<td></td>
		<td><h5>{{total_amtpaid() | number}}</h5></td>
		<td></td>
		<td></td>
	 </tr>
   </tbody>
		 		
  </table>
   <tfoot>
    <tt>Total Records: {{expensemastmis.length}}</tt>
        Current Page    {{currentPage+1}} of {{Math.ceil(expensemastmis.length/pageSize)}}
      <td colspan="6">
         <div class="pagination pull-right">
           <ul>
          <!--  <li ng-class="{disabled: currentPage == 0}">
                <a href ng-click="currentPage=currentPage-1">« Prev</a> 
         </li>-->
          <button class="btn btn-info" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> « Prev </button>
                    
           <li ng-repeat="n in range(expensemastmis.length)"
               ng-class="{active: n == currentPage}"
               ng-click="setPage()">
                <a href ng-bind="n + 1">1</a>
           </li> 
           <!--    <li ng-class="{disabled: currentPage >= customermast.length/pageSize - 1 }">
                     <a href ng-click="currentPage=currentPage+1">Next »</a>  -->
    <button class="btn btn-info" ng-disabled="currentPage >= expensemastmis.length/pageSize - 1" ng-click="currentPage=currentPage+1"> Next » </button>
   </li>
    </ul>
   </div>
   </td>
   </tfoot>
   
</body>
</html>
